var CirclePercent = function () {
  var self = this
  this.percentNum = 0
  this.circlePercent = new THREE.Group();
  this.materialColor = new THREE.Color().setStyle('#0782F5')
  this.lightMaterialColor = new THREE.Color().setStyle('#24FFFF')

  this.circleGroup = new THREE.Group();
  this.circlePointsPositions = null;
  this.circlePointOne = null;
  this.circlePointTwo = null;
  this.circlePointThree = null;
  this.currentAngle = 0;
  const circleRadius = 5;
  const circlePointMoveSpeed = 0.03;


  this.centerText = null;
  this.font = null;

  //外侧梯形组成的圈
  this.trapezoidsCircleGroup = new THREE.Group();
  this.trapezoidPositions = null;
  this.trapezoidTopPoints = null;
  this.trapezoidBottomPoints = null;
  this.trapezoidLightLineIndex = 10;

  function getPointsFromOneCircle(circleRadius, pointNum) {
    const curve = new THREE.EllipseCurve(
      0, 0,
      circleRadius, circleRadius,
      Math.PI / 2, 5 * Math.PI / 2,
      false,
      0
    );

    return curve.getPoints(pointNum);
  }


  function createTrapezoid() {
    const topWidth = 2;
    const bottomWidth = 1.4;
    const height = 2.2;
    const path = new THREE.Shape();
    path.moveTo(-topWidth / 2, height / 2);
    path.lineTo(topWidth / 2, height / 2);
    path.lineTo(bottomWidth / 2, -height / 2);
    path.lineTo(-bottomWidth / 2, -height / 2);
    path.moveTo(-topWidth / 2, height / 2);
    path.closePath()

    const material = new THREE.LineBasicMaterial({
      color: 0x0782F5
    });
    // 拉伸几何体配置项说明
    /* curveSegments — int，曲线上点的数量，默认值是12。
    steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。
    depth — float，挤出的形状的深度，默认值为100。
    bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。
    bevelThickness — float，设置原始形状上斜角的厚度。默认值为6。
    bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-2。
    bevelSegments — int。斜角的分段层数，默认值为3。
    extrudePath — THREE.CurvePath对象。一条沿着被挤出形状的三维样条线。
    UVGenerator — Object。提供了UV生成器函数的对象。 */

    // 拉伸几何体配置项
    const options = {
      depth: 0.1, //厚度
      bevelEnabled: false, //是否要斜角
      curveSegments: 1,
      steps: 1
    }

    // 创建拉伸几何体
    const geometry = new THREE.ExtrudeGeometry(path, options)

    const trapezoid = new THREE.Mesh(geometry, material);
    return trapezoid
  }

  this.initTrapezoidsCircle = (() => {

    //绘制外层圆用来获取坐标
    this.trapezoidPositions = getPointsFromOneCircle(circleRadius + 2, 20);
    this.trapezoidPositions.forEach((position, index) => {

      let trapezoid = createTrapezoid(index)
      trapezoid.position.set(position.x, position.y, 0)
      trapezoid.rotation.z = index * 2 * Math.PI / 20
      this.trapezoidsCircleGroup.add(trapezoid);
    })

    this.circlePercent.add(this.trapezoidsCircleGroup)
  })()

  this.initCircle = (() => {

    this.circlePointsPositions = getPointsFromOneCircle(circleRadius, 200);
    const geometry = new THREE.BufferGeometry().setFromPoints(this.circlePointsPositions);

    const material = new THREE.LineBasicMaterial({
      color: this.lightMaterialColor
    });

    const circle = new THREE.Line(geometry, material);
    this.circleGroup.add(circle);

    const smallPointGeom = new THREE.SphereBufferGeometry(0.2, 32, 32);
    this.circlePointOne = new THREE.Mesh(smallPointGeom, material)
    this.circlePointOne.position.set(this.circlePointsPositions[0].x, this.circlePointsPositions[0].y, 0)
    this.circleGroup.add(this.circlePointOne)

    this.circlePointTwo = this.circlePointOne.clone()
    this.circlePointTwo.position.set(this.circlePointsPositions[67].x, this.circlePointsPositions[67].y, 0)
    this.circleGroup.add(this.circlePointTwo)

    this.circlePointThree = this.circlePointOne.clone()
    this.circlePointThree.position.set(this.circlePointsPositions[133].x, this.circlePointsPositions[133].y, 0)
    this.circleGroup.add(this.circlePointThree)

    this.circlePercent.add(this.circleGroup)

  })()

  this.circleTwoPointsAnimation = () => {
    const angle = this.percentNum / 100 * (2 * Math.PI)

    if (angle > this.currentAngle) {
      this.currentAngle += 0.01
    } else {
      this.currentAngle -= 0.01
    }

    this.circlePointOne.position.x = Math.cos(this.currentAngle) * circleRadius
    this.circlePointOne.position.y = Math.sin(this.currentAngle) * circleRadius
    this.circlePointTwo.position.x = Math.cos(this.currentAngle + 2 * Math.PI / 3) * circleRadius
    this.circlePointTwo.position.y = Math.sin(this.currentAngle + 2 * Math.PI / 3) * circleRadius
    this.circlePointThree.position.x = Math.cos(this.currentAngle + 4 * Math.PI / 3) * circleRadius
    this.circlePointThree.position.y = Math.sin(this.currentAngle + 4 * Math.PI / 3) * circleRadius
  }

  this.trapezoidsAnimation = () => {
    //根据新值计算梯形块的索引
    const lightLineIndex = parseInt(this.percentNum / 5)

    if (lightLineIndex < this.trapezoidLightLineIndex) {

      for (let i = this.trapezoidLightLineIndex; i > lightLineIndex; i -= 0.01) {
        const index = 20 - parseInt(i)
        this.trapezoidsCircleGroup.children[index].material.color = this.materialColor
      }

    } else {

      for (let i = 0; i < lightLineIndex; i += 0.01) {
        const index = 20 - parseInt(i)
        this.trapezoidsCircleGroup.children[index].material.color = this.lightMaterialColor
      }

    }

    this.trapezoidLightLineIndex = lightLineIndex

  }


  this.circlePercent.updatePercent = (percentNum) => {
    this.percentNum = percentNum
    this.circleTwoPointsAnimation()
    this.trapezoidsAnimation()
  }

  return this.circlePercent
}